<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        tr,
        td,
        table {
            border: 1px solid red;
            border-collapse: collapse;
            text-align: center;
        }
    </style>
</head>

<body>
    <table>
        <tr>
            <td>名次</td>
            <td>姓名</td>
            <td>年纪</td>
            <td>性别</td>
            <td>销售额</td>
            <td>业绩状态</td>
        </tr>
    </table>
    <script>
        //实现以下需求 ： 将以下销售人员的数据 渲染到页面上
        // 销售人员数据
        let sales = [
            { name: '小明', age: 18, gender: '男', money: 30, status: 0 },
            { name: '小红', age: 26, gender: '女', money: 99, status: 3 },
            { name: '小刚', age: 19, gender: '男', money: 88, status: 2 },
            { name: '小丽', age: 20, gender: '女', money: 67, status: 1 },
            { name: '晓强', age: 23, gender: '女', money: 77, status: 1 },
            { name: '小张', age: 25, gender: '女', money: 80, status: 2 },
        ]
        // 字段 money 是销售金额
        //要求1: 数据要排序，从大到小显示
        const arr = sales.sort(function (a, b) {
            return b.money - a.money
        })
        //要求2: 销售金额 显示 需要带单位w
        arr.forEach(item => {
            item.money = item.money + 'w'
        });

        //要求3: 销售状态 需要 显示出  未及格， 及格， 良好， 优秀 0:代表 未及格 1: 代表 及格 2: 代表 良好 3: 代表 优秀
        const obj = {
            0: '未及格',
            1: '及格',
            2: '良好',
            3: '优秀',
        }
        arr.forEach(item => {
            item.status = obj[item.status]
        });
        console.log(arr);

        //要求4: 渲染页面的过程 要封装成函数
        const table = document.querySelector('table')
        // table.innerHTML =
        arr.forEach((item, i) => {
            const tr = document.createElement('tr')
            tr.innerHTML = `
                <td>${i + 1}</td>
                <td>${item.name}</td>
                <td>${item.age}</td>
                <td>${item.gender}</td>
                <td>${item.money}</td>
                <td>${item.status}</td>
                `
            table.appendChild(tr)
            // console.log(tr);
            // document.write(`
            // <tr>

            // </tr><br>
            // `)
        })
    </script>
</body>

</html>